<template>
	<view class="user-notice">
		<text class="title">添加随行人员</text>
		<u-line></u-line>
		<view class="contains">
			<u--form labelPosition="left" :model="formData" :rules="rules" labelWidth="100"
				:labelStyle="{fontSize:'28rpx',color:'#323232',fontWeight:'bold'}" ref="uForm2">
				<view style="display: flex;">
					<text style="height: 45px;line-height: 45px; font-size: 20px;color: #f56c6c;">*</text>
					<view style="width: 100%;">
						<u-form-item label="姓名" prop="nickName" borderBottom>
							<u--input v-model="formData.nickName" placeholder="请输入姓名" border="none"></u--input>
						</u-form-item>
					</view>
				</view>
				<view style="display: flex;">
					<text style="height: 45px;line-height: 45px; font-size: 20px;color: #fff;">*</text>
					<view style="width: 100%;">
						<u-form-item label="手机号" borderBottom>
							<u--input v-model="formData.mobile" placeholder="请输入手机号" border="none"></u--input>
						</u-form-item>
					</view>
				</view>
				<view style="display: flex;">
					<text style="height: 45px;line-height: 45px; font-size: 20px;color: #fff;">*</text>
					<view style="width: 100%;">
						<u-form-item label="人员类型" borderBottom>
							<u--input v-model="formData.personnelCategory" placeholder="请输入人员类型" border="none"></u--input>
						</u-form-item>
					</view>
				</view>
				<view style="display: flex;">
					<text style="height: 45px;line-height: 45px; font-size: 20px;color: #fff;">*</text>
					<view style="width: 100%;">
						<u-form-item label="证件编号" borderBottom>
							<u--input v-model="formData.idNumber" placeholder="请输入证件编号" border="none"></u--input>
						</u-form-item>
					</view>
				</view>
				
				<view style="display: flex;">
					<text style="height: 45px;line-height: 45px;font-size: 20px;color: #f56c6c;">*</text>
					<view style="width: 100%;">
						<u-form-item label="所在单位" prop="deptName" borderBottom>
							<u--input v-model="formData.deptName" placeholder="请输入所在单位" border="none"></u--input>
						</u-form-item>
					</view>
				</view>
				<view style="display: flex;">
					<text style="height: 45px;line-height: 45px; font-size: 20px;color: #fff;">*</text>
					<view style="width: 100%;">
						<u-form-item label="职务/职级" borderBottom>
							<u--input v-model="formData.post" placeholder="请输入职务/职级" border="none"></u--input>
						</u-form-item>
					</view>
				</view>
			</u--form>
		</view>
		<view style="display: flex; width: 100%;margin-top: 30rpx;">
			<u-button color="#1169DB" plain="true" text="关闭" @click="closed"></u-button>
			<view style="width: 30rpx;"></view>
			<u-button type="primary" text="确定" @click="sureInCompany"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				formData: {
					nickName: "",
					mobile: "",
					personnelCategory: "",
					idNumber: "",
					deptName: "",
					post: "",
				},
				rules: {
					nickName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur']
					}],
					deptName: [{
						required: true,
						message: '请输入所在单位',
						trigger: ['blur']
					}]
				},
			};
		},
		onReady() {
			this.$refs.uForm2.setRules(this.rules)
		},
		methods: {

			closed() {
				this.$emit('close')
			},
			/* 提交 */
			sureInCompany() {
				this.$refs.uForm2.validate().then(res => {
					this.$emit('confirm', this.formData)
				}).catch(errors => {

				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		width: 100px;
	}

	.user-notice {
		width: 80vw;
		padding: 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			font-size: 30rpx;
			color: #1169DB;
			font-weight: bold;
			padding-bottom: 30rpx;
		}

		.contains {
			width: 100%;
			height: 35vh;
			overflow: auto;
			display: flex;
			flex-direction: column;



		}


	}
</style>